<template>
    <div id="mine">
        <PageTitle>个人中心</PageTitle>
        <div class="pages-top pages-scroll">
            <div id="mine-flxd">
                <router-link to="/mine/personalInfo"><img src="../../static/img/人.png"></router-link>
                <div>
                    <div class="mine-info-one">{{userInfo.tel}}</div>
                    <div><span class="mine-info-two">{{userInfo.class}}</span><span class="mine-info-three">{{userInfo.vip}}</span></div>
                </div>
                <div id="grow">
                    <span class="v">v</span>
                    <span>成长值0</span>
                </div>
            </div>
            <div id="account-info">
                <div><p class="account">{{userInfo.balance}}</p><p class="info">账户余额(元)</p></div>
                <div><p class="account">{{userInfo.integral}}</p><p class="info">我的积分</p></div>
                <div><p class="account">5</p><p class="info">红包个数</p></div>
            </div>
            <div id="entry">
                <img src="../../static/img/img_jifenshangcheng.jpg">
                <img src="../../static/img/img_qiandao.jpg">
            </div>
            <div class="order">
                <div class="all-order">
                    <div>
                        <img src="../../static/img/ic_me_dingdan.png">
                        <span>我的订单</span>
                    </div>
                    <div>
                        <span class="all-order-right">全部订单</span>
                        <img src="../../static/icon/iconfont-platform entrance.svg">
                    </div>
                </div>
            </div>
            <div id="order-list">
                <div><img src="../../static/img/ic_me_dfkdd.png"><p class="info">待付款</p></div>
                <div><img src="../../static/img/ic_me_dfhdd.png"><p class="info">待发货</p></div>
                <div><img src="../../static/img/ic_me_yfhdd.png"><p class="info">待收货</p></div>
                <div><img src="../../static/img/ic_me_dpjdd.png"><p class="info">待评价</p></div>
            </div>
            <div class="order">
                <div class="all-order">
                    <div>
                        <img src="../../static/img/ic_me_tequan.png">
                        <span>我的特权</span>
                    </div>
                    <div>
                        <span class="all-order-right">{{userInfo.class}}{{userInfo.vip}}</span>
                        <img src="../../static/icon/iconfont-platform entrance.svg">
                    </div>
                </div>
                <div class="all-order">
                    <div>
                        <img src="../../static/img/ic_me_dizhi.png">
                        <span>地址管理</span>
                    </div>
                    <div>
                        <img src="../../static/icon/iconfont-platform entrance.svg">
                    </div>
                </div>
                <div class="all-order">
                    <div>
                        <img src="../../static/img/ic_me_bdsj.png">
                        <span>绑定手机</span>
                    </div>
                    <div>
                        <img src="../../static/icon/iconfont-platform entrance.svg">
                    </div>
                </div>
                <div class="all-order">
                    <div>
                        <img src="../../static/img/ic_me_xgmm.png">
                        <span>修改密码</span>
                    </div>
                    <div>
                        <img src="../../static/icon/iconfont-platform entrance.svg">
                    </div>
                </div>
            </div>
        </div>
        <Tabbar></Tabbar>
    </div>
</template>
<script>
import PageTitle from "../components/PageTitle.vue";
import Tabbar from "../components/Tabbar.vue";
export default {
    components:{PageTitle,Tabbar},
    data(){
        return {
            userInfo:{}
        }
    },
    mounted(){
        if(!sessionStorage.userInfo){
            return location.hash = "/login";
        }else{
            var  userInfo = JSON.parse(sessionStorage.userInfo);
            userInfo.tel = userInfo.tel.toString().substring(0,3)+"****"+userInfo.tel.toString().substring(7,11);
            this.userInfo = userInfo;
        }

    }
}
</script>
<style scoped>
    #mine{
        background-color: #F4F4F4;
        height: 100vh;
    }
    #mine-flxd{
        display: flex;
        width: 100%;
        padding: 11vw 2.8vw;
        position: relative;
    }
    #mine-flxd img{
        width: 14vw;
        height: 14vw;
    }
    .mine-info-one{
        font-weight: 700;
        margin-top: 1vw;
        margin-left: 2vw;
    }
    .mine-info-two{
        font-size: 3.92vw;
        margin-left: 2vw;
    }
    .mine-info-three{
        font-size: 3.92vw;
        background-color: #FF3600;
        border-radius: 40%;
        padding: 0 1.5vw;
        color: white;
        font-weight: 700;
    }
    #grow{
        position: absolute;
        width: 22.4vw;
        height: 9.24vw;
        background-color: #ff3600;
        border-radius: 4.5vw 0 0 4.5vw;
        bottom: 0;
        right: 0;
        line-height: 9.24vw;
        font-size: 3.36vw;
        color: white;
    }
    .v{
        display: inline-block;
        color: #ff3600;
        background-color: white;
        text-align: center;
        line-height: 4.2vw;
        width: 4.2vw;
        height: 4.2vw;
        border-radius: 50%;
        font-size: 3.36vw;
        margin-left: 3vw;
    }
    #account-info{
        background-color: white;
        display: flex;
        justify-content: space-around;
        text-align: center;
        margin-top:4.2vw;
        padding: 4.2vw 0;
    }
    #account-info div{
        width: 33.3333vw;
        border-right: #b0b0b0 solid 1px;
    }
    .account{
        font-weight: 700;
        color: #ff3600;
        font-size: 4.48vw;
    }
    .info{
        color: #666666;
    }
    #entry{
        display: flex;
        justify-content: space-between;
        padding: 2.8vw;
        background-color: white;
        margin: 2.8vw 0;
    }
    #entry img{
        width: 45.8vw;
        height: 14.56vw;
    }
    .all-order{
        padding: 2.8vw;
        background-color: white;
        display: flex;
        justify-content: space-between;
        border-bottom: #EEEEEE solid 1px;
        
    }
    .order{
        margin-top: 2.8vw;
    }
    .order img{
        width: 7vw;
    }
    .order span{
        margin-left: 2.8vw;
        vertical-align: top;
    }
    .all-order-right{
        color: #b0b0b0;
    }
    #order-list{
        display: flex;
        justify-content: space-around;
        background-color: white;
        padding: 4.2vw;
    }
    #order-list img{
        width: 7vw;
    }
</style>